<template>
	<view class="tabs">
		<view v-for="(item, index) in tabItems" :key="index"
			:class="{ 'tab-item': true, 'active': currentIndex === index }" @click="selectItem(index)">
			{{ item.name }}
		</view>
	</view>
</template>

<script>
	export default {
		name: "MyTabs",
		props: ['items'],
		data() {
			return {
				currentIndex: 0,
				tabItems: this.items
			};
		},
		methods: {
			selectItem(index) {
				if(this.currentIndex==index) return
				this.currentIndex = index;
				// 触发事件，向父组件传递当前选中的值
				this.$emit('selected', this.tabItems[index]);
			}
		}
	}
</script>

<style scoped lang="scss">
	.tabs {
		width: 100%;
		display: flex;
		justify-content: space-around;
	}

	.tab-item {
		padding: 10px 20px;
		// cursor: pointer;
		position: relative;
		font-size: 26rpx;
	}

	.tab-item.active {
		color: $uni-color-primary;
		transform:scale(1.15) ;
		transition: all 0.2s;  
		// border-bottom: 2px solid $uni-color-primary;
	}
	.tab-item.active::after {
	  content: ''; /* 必须有内容才能显示 */
	  position: absolute; /* 绝对定位 */
	  left: 30%; /* 左侧开始 */
	  bottom: 2px; /* 调整位置以匹配边框 */
	  width: 40%; /* 宽度与父元素相同 */
	  height: 2px; /* 边框高度 */
	  background-color: $uni-color-primary; /* 使用主题颜色 */
	}
</style>